import { Button, Form, Input, message } from 'antd';
import React, {useState} from 'react';
import classes from './index.module.css'
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { login } from '../../api'

const App = () => {
    const Navigate = useNavigate()

    const onFinish = async (values) => {
        setMsg((a) => {
            return{
               ...a,
                password: values.password,
                username: values.username
            }
        })
        await login(Msg)
        Navigate('/')
    };

    const onFinishFailed = () => {
        message.error('请按要求填写');
    };

    const [Msg, setMsg]  = useState({
        password: '111111',
        username: 'zcf111'
    })

    const toRegister = () => {
        Navigate('/register')
    }

    return (
        <div className={classes.mainBox}>
            <div className={classes.loginBox}>
                <div className={classes.loginBoxText}>
                    <span>文章管理后台系统</span>
                </div>
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={Msg}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    className={classes.form}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            { required: true, message: '请填写用户名', trigger: 'blur' },
                            { min: 1, max: 10, message: '1-10位大小写字母和数字', trigger: 'blur' },
                        ]}
                        className={classes.item}
                    >
                        <Input prefix={<UserOutlined />} className={classes.input} value={Msg.username}/>
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            { required: true, message: '请填写密码', trigger: 'blur' },
                            { min: 6, max: 15, message: '6-15位非空格字符', trigger: 'blur' },
                        ]}
                        className={classes.item}
                    >
                        <Input.Password prefix={<LockOutlined />} className={classes.input} value={Msg.password}/>
                    </Form.Item>

                    <Form.Item
                        className={classes.item}
                    >
                        <Button type="primary" htmlType="submit" className={classes.button}>
                            提交
                        </Button>
                    </Form.Item>
                </Form>
                <div className={classes.toRegister}>
                    <Button type="link" className={classes.link} onClick={toRegister}>去注册-></Button>
                </div>
                <div className={classes.remindBox}>
                    <span>用户名：zcf111</span><span>密码：111111</span>
                </div>
            </div>
        </div>
    );
};
export default App;
